<template>
  <div class="addBrand-container">
    <HeadLable :title="$route.query.id ? '修改员工' : '添加员工'" :goBack="true" />
    <el-card class="container mt-3">
      <el-form
        ref="employeeRef"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        label-width="180px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号:" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入账号" maxlength="20" />
        </el-form-item>
        <el-form-item label="员工姓名:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入员工姓名" maxlength="12" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" maxlength="11" />
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男" value="1" />
            <el-radio label="女" value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" class="idNumber" prop="idNumber">
          <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号" maxlength="20" />
        </el-form-item>
        <div class="subBox address">
          <!-- <el-form-item> -->
          <el-button @click="cancel(true)"> 取消 </el-button>
          <el-button type="primary" @click="submitForm(true)"> 提交 </el-button>
          <el-button @click="submitForm(false)"> 提交并继续添加 </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import HeadLable from "@/components/HeadLable/index.vue"
import { addEmployeeAPI, getEmployeeDetailAPI, updateEmployeeInfoAPI } from "@/api/employee"
import { ElMessage, FormInstance } from "element-plus"
import { useRouter, useRoute } from "vue-router"
import type { EmployeeItem } from "@/types/employee"

// 全局路由
const router = useRouter()

// 页面路由
const route = useRoute()

// 表单数据
const ruleForm = ref<EmployeeItem>({
  name: "",
  phone: "",
  // 'password': '',
  // 'rePassword': '',
  sex: "1",
  idNumber: "",
  username: ""
})

// 表单对象
const employeeRef = ref<FormInstance>()

// 表单校验
const rules = {
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur"
    },
    {
      pattern: /^[a-zA-Z]*$/,
      message: "账号只能输入字母",
      trigger: "blur"
    }
  ],
  name: [
    {
      required: true,
      message: "请输入员工姓名",
      trigger: "blur"
    }
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur"
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur"
    }
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change"
    }
  ],
  idNumber: [
    {
      required: true,
      message: "请输入身份证号",
      trigger: "blur"
    },
    {
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: "请输入正确的身份证号",
      trigger: "blur"
    }
  ]
}

// 提交添加
const submitForm = (isBack: boolean = true) => {
  employeeRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      // 新增
      if (!route.query.id) {
        const res = await addEmployeeAPI(ruleForm.value)
        if (res.code === 1) {
          ElMessage.success("添加成功")
          cancel(isBack)
        }
      } else {
        const res = await updateEmployeeInfoAPI(ruleForm.value)
        if (res.code === 1) {
          ElMessage.success("修改成功")
          cancel(isBack)
        }
      }
    }
  })
}

// 取消
const cancel = (isBack?: boolean) => {
  if (isBack) {
    //   返回
    router.back()
  }
  // 清空表单
  ruleForm.value = {
    name: "",
    phone: "",
    sex: "1",
    idNumber: "",
    username: ""
  }
  //   清空校验
  employeeRef.value?.resetFields()
}

// 获取员工详情
const getEmployeeDetail = async (id: number) => {
  const res = await getEmployeeDetailAPI(id)
  if (res.code === 1) {
    ruleForm.value = res.data
  }
}

onMounted(() => {
  if (route.query.id) {
    // 获取员工详情
    getEmployeeDetail(parseInt(route.query.id as string))
  }
})
</script>

<style lang="scss" scoped>
.addBrand {
  &-container {
    margin: 30px;
    margin-top: 0px;
    .HeadLable {
      background-color: transparent;
      margin-bottom: 0px;
      padding-left: 0px;
    }
    .container {
      position: relative;
      z-index: 1;
      padding: 30px;
      border-radius: 4px;
      // min-height: 500px;
      .subBox {
        padding-top: 30px;
        text-align: center;
        border-top: solid 1px #999;
      }
    }
    .idNumber {
      margin-bottom: 39px;
    }

    .el-form-item {
      margin-bottom: 29px;
    }
    .el-input {
      width: 293px;
    }
  }
}
</style>
